<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花龙腾航 - 机票预订系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f8fafc;
        }

        .hero-bg {
            background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
            background-size: cover;
            background-position: center;
        }

        .tab-active {
            border-bottom: 3px solid #3b82f6;
            color: #3b82f6;
            font-weight: 500;
        }

        .search-box {
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .logo-text {
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .user-avatar {
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        }
        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 100;
            justify-content: center;
            align-items: center;
        }

        .modal.open {
            display: flex;
        }

        .modal-content {
            background-color: white;
            border-radius: 0.5rem;
            width: 90%;
            max-width: 500px;
            animation: modalFadeIn 0.3s ease-out;
        }
    </style>
</head>
<body>
<!-- Navigation -->
<header class="bg-white shadow-sm sticky top-0 z-10">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i class="fas fa-plane text-3xl text-blue-500"></i>
            <h1 class="text-2xl font-bold logo-text">花龙腾航</h1>
        </div>
        <nav class="hidden md:flex space-x-6">
            <a href="javascript:void(0)" onclick="showLoginModal(event)" class="text-blue-500 font-medium">首页</a>
            <a href="javascript:void(0)" onclick="showLoginModal(event)" class="text-gray-600 hover:text-blue-500">航班查询</a>
            <a href="javascript:void(0)" onclick="showLoginModal(event)" class="text-gray-600 hover:text-blue-500">我的订单</a>
            <a href="javascript:void(0)" onclick="showLoginModal(event)" class="text-gray-600 hover:text-blue-500">我的机票</a>
            <a href="javascript:void(0)" onclick="showLoginModal(event)" class="text-gray-600 hover:text-blue-500">会员中心</a>
        </nav>
        <div class="flex items-center space-x-4">
            <div class="flex items-center space-x-2 cursor-pointer group relative" id="user-menu">
                <div class="h-8 w-8 rounded-full user-avatar flex items-center justify-center text-white">
                    <i class="fas fa-user"></i>
                </div>
                <a class="hidden md:inline text-gray-700 group-hover:text-blue-500" href="user_login">登录/注册</a>
            </div>
        </div>
    </div>
</header>

<!-- Hero Section with Search -->
<div class="hero-bg py-16 md:py-24 text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-4">探索世界，从花龙腾航开始</h1>
            <p class="text-xl md:text-2xl mb-8">享受舒适旅程，体验尊贵服务</p>
        </div>

        <!-- Search Box -->
        <form class="bg-white rounded-lg p-6 search-box max-w-4xl mx-auto mt-8">
            <div class="flex border-b">
                <a href="javascript:void(0)" onclick="showLoginModal(event)" class="px-4 py-2 font-medium tab-active">单程</a>
                <a href="javascript:void(0)" onclick="showLoginModal(event)" class="px-4 py-2 font-medium text-gray-500">往返</a>
                <a href="javascript:void(0)" onclick="showLoginModal(event)" class="px-4 py-2 font-medium text-gray-500">多程</a>
            </div>

            <!-- One Way Form -->
            <div id="one-way-form" class="mt-4">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">出发城市</label>
                        <div class="relative">
                            <label>
                                <input
                                        type="text"
                                        name="departureCity"
                                        class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 !text-black"
                                        placeholder="北京"
                                >
                                <i class="fas fa-plane-departure absolute right-3 top-3 text-gray-400"></i>
                            </label>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">到达城市</label>
                        <div class="relative">
                            <label>
                                <input
                                        type="text"
                                        name="arrivalCity"
                                        class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 !text-black"
                                        placeholder="上海"
                                >
                                <i class="fas fa-plane-arrival absolute right-3 top-3 text-gray-400"></i>
                            </label>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">出发日期</label>
                        <div class="relative">
                            <label>
                                <input
                                        type="date"
                                        name="departureDate"
                                        class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 text-black appearance-none"
                                >
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-6 flex justify-center">
                <a href="javascript:void(0)" onclick="showLoginModal(event)" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition duration-300 flex items-center">
                    <i class="fas fa-search mr-2"></i> 查询航班
                </a>
            </div>
        </form>
    </div>
</div>

<!-- Special Offers -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="flex justify-between items-center mb-8">
        <h2 class="text-2xl font-bold text-gray-900">热门航线</h2>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Offer 1 -->
        <div class="bg-white rounded-lg overflow-hidden flight-card" th:each="flight : ${flights}">
          <div class="relative">
            <img th:src="'static/cities/'+${flight.getArrival_city()}+'1.jpg?version=' + ${#dates.createNow().time}" alt="Beijing" class="w-full h-48 object-cover">
          </div>
          <div class="p-4">
            <div class="flex justify-between items-start">
              <div>
                <h3 class="font-bold text-lg" th:text="${flight.getDeparture_city()} + ' → ' + ${flight.getArrival_city()}">北京 → 上海</h3>
                <p class="text-gray-500 text-sm">经济舱</p>
              </div>
              <div class="text-right">
                <span class="text-blue-500 font-bold text-xl" th:text="'¥'+${flight.getEconomy_price()}">¥599</span>
                <p class="text-gray-400 text-xs">明日最低价</p>
              </div>
            </div>
            <div class="mt-4 flex justify-between text-sm text-gray-600">
              <div>
                <i class="fas fa-plane-departure mr-1"></i>
                <span th:text="${flight.getDeparture_time()}">08:00</span>
              </div>
              <div>
                <i class="fas fa-plane-arrival mr-1"></i>
                <span th:text="${flight.getArrival_time()}">10:30</span>
              </div>
            </div>
            <button type="button" onclick="showLoginModal(event)" class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-md text-sm font-medium transition duration-300">
              立即预订
            </button>
          </div>
        </div>

    </div>
</div>

<!-- Popular Destinations -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="flex justify-between items-center mb-8">
        <h2 class="text-2xl font-bold text-gray-900">热门目的地</h2>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="relative group overflow-hidden rounded-lg h-48">
            <a href="javascript:void(0)" onclick="showLoginModal(event)">
                <img th:src="'static/cities/'+${Destination1Num}+'.jpg?version=' + ${#dates.createNow().time}" alt="Beijing" class="w-full h-full object-cover transition duration-500 group-hover:scale-110">
                <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                <div class="absolute bottom-0 left-0 p-4">
                    <h3 class="text-white font-bold text-lg" th:text="${Destination1}">北京</h3>
                </div>
            </a>>
        </div>

        <div class="relative group overflow-hidden rounded-lg h-48">
            <a href="javascript:void(0)" onclick="showLoginModal(event)">
                <img th:src="'static/cities/'+${Destination2Num}+'.jpg?version=' + ${#dates.createNow().time}" alt="Shanghai" class="w-full h-full object-cover transition duration-500 group-hover:scale-110">
                <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                <div class="absolute bottom-0 left-0 p-4">
                    <h3 class="text-white font-bold text-lg" th:text="${Destination2}">上海</h3>
                </div>
            </a>
        </div>

        <div class="relative group overflow-hidden rounded-lg h-48">
            <a href="javascript:void(0)" onclick="showLoginModal(event)">
                <img th:src="'static/cities/'+${Destination3Num}+'.jpg?version=' + ${#dates.createNow().time}" alt="Guangzhou" class="w-full h-full object-cover transition duration-500 group-hover:scale-110">
                <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                <div class="absolute bottom-0 left-0 p-4">
                    <h3 class="text-white font-bold text-lg" th:text="${Destination3}">广州</h3>
                </div>
            </a>
        </div>

        <div class="relative group overflow-hidden rounded-lg h-48">
            <a href="javascript:void(0)" onclick="showLoginModal(event)">
                <img th:src="'static/cities/'+${Destination4Num}+'.jpg?version=' + ${#dates.createNow().time}" alt="Guangzhou" class="w-full h-full object-cover transition duration-500 group-hover:scale-110">
                <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                <div class="absolute bottom-0 left-0 p-4">
                    <h3 class="text-white font-bold text-lg" th:text="${Destination4}">广州</h3>
                </div>
            </a>
        </div>
        </div>

    </div>


<div class="bg-gray-50 py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-center text-2xl font-bold text-gray-900 mb-8">为什么选择花龙腾航</h2>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="text-center">
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mb-4">
                    <i class="fas fa-shield-alt text-xl"></i>
                </div>
                <h3 class="text-lg font-medium text-gray-900 mb-2">安全可靠</h3>
                <p class="text-gray-500">我们拥有最先进的机队和严格的安全标准，确保您的每一次飞行都安全无忧。</p>
            </div>

            <div class="text-center">
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mb-4">
                    <i class="fas fa-heart text-xl"></i>
                </div>
                <h3 class="text-lg font-medium text-gray-900 mb-2">优质服务</h3>
                <p class="text-gray-500">我们训练有素的机组人员将为您提供贴心周到的服务，让您的旅程更加舒适。</p>
            </div>

            <div class="text-center">
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mb-4">
                    <i class="fas fa-percentage text-xl"></i>
                </div>
                <h3 class="text-lg font-medium text-gray-900 mb-2">超值优惠</h3>
                <p class="text-gray-500">定期推出特价机票和会员专享优惠，让您以更实惠的价格享受高品质飞行体验。</p>
            </div>
        </div>
    </div>
</div>

<!-- Footer -->
<footer class="bg-gray-900 text-white pt-12 pb-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
                <h3 class="text-lg font-bold mb-4 flex items-center">
                    <i class="fas fa-plane mr-2 text-blue-400"></i>
                    <span class="logo-text">花龙腾航</span>
                </h3>
                <p class="text-gray-400 mb-4">为您提供安全、舒适、便捷的航空旅行服务。</p>
                <div class="flex space-x-4">
                    <a href="https://weixin.com" class="text-gray-400 hover:text-white"><i class="fab fa-weixin"></i></a>
                    <a href="https://weibo.com" class="text-gray-400 hover:text-white"><i class="fab fa-weibo"></i></a>
                    <a href="https://qq.com" class="text-gray-400 hover:text-white"><i class="fab fa-qq"></i></a>
                    <a href="https://douyin.com" class="text-gray-400 hover:text-white"><i class="fab fa-tiktok"></i></a>
                </div>
            </div>

            <div>
                <h3 class="text-lg font-bold mb-4">关于我们</h3>
                <ul class="space-y-2">
                    <li><a href="public_company_profile" class="text-gray-400 hover:text-white">公司简介</a></li>
                    <li><a href="public_company_profile" class="text-gray-400 hover:text-white">企业文化</a></li>
                    <li><a href="public_company_profile" class="text-gray-400 hover:text-white">发展历程</a></li>
                    <li><a href="public_job_posting" class="text-gray-400 hover:text-white">招贤纳士</a></li>
                </ul>
            </div>

            <div>
                <h3 class="text-lg font-bold mb-4">帮助中心</h3>
                <ul class="space-y-2">
                    <li><a href="public_faq" class="text-gray-400 hover:text-white">常见问题</a></li>
                    <li><a href="public_baggage_regulations" class="text-gray-400 hover:text-white">行李规定</a></li>
                    <li><a href="public_company_profile" class="text-gray-400 hover:text-white">公司简介</a></li>
                    <li><a href="public_callus" class="text-gray-400 hover:text-white">联系我们</a></li>

                </ul>
            </div>

            <div>
                <h3 class="text-lg font-bold mb-4">联系方式</h3>
                <ul class="space-y-2 text-gray-400">
                    <li class="flex items-center"><i class="fas fa-phone-alt mr-2"></i> 客服热线: 19976338635</li>
                    <li class="flex items-center"><i class="fas fa-envelope mr-2"></i> ganshenghao888@qq.com</li>
                    <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2"></i> 广东省广州市天河区华南农业大学</li>
                </ul>
            </div>
        </div>

        <div class="border-t border-gray-800 mt-8 pt-6 flex flex-col md:flex-row justify-between items-center">
            <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2025 花龙腾航 版权所有</p>
            <div class="flex space-x-6">
                <a href="public_privacy_policy" class="text-gray-400 hover:text-white text-sm">隐私政策</a>
                <a href="public_user_agreement" class="text-gray-400 hover:text-white text-sm">使用条款</a>
                <a href="public_cookie" class="text-gray-400 hover:text-white text-sm">Cookie政策</a>
            </div>
        </div>
    </div>
</footer>

<!-- 弹窗 Modal -->
<div class="modal hidden" id="loginModal">
    <div class="modal-content">
        <div class="p-6 border-b border-gray-200 flex justify-between items-center">
            <h3 class="text-lg font-medium text-gray-800">请先登录或注册</h3>
            <button class="text-gray-400 hover:text-gray-500" onclick="closeModal('loginModal')">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="p-6">
            <div class="text-center">
                <i class="fas fa-sign-in-alt text-4xl text-blue-500 mb-4"></i>
                <p class="text-gray-700 mb-6">您尚未登录，请登录或注册以继续操作。</p>

                <div class="flex justify-center space-x-3">
                    <button type="button" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition" onclick="closeModal('loginModal')">
                        取消
                    </button>
                    <button type="submit" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition inline-block" onclick="confirmLogin()">
                        前往登录/注册
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function showLoginModal(event) {
        event.preventDefault(); // 阻止默认行为
        document.getElementById('loginModal').classList.remove('hidden');
        document.getElementById('loginModal').classList.add('open');

    }

    function closeModal(modalId) {
        document.getElementById(modalId).classList.remove('open');
        document.getElementById(modalId).classList.add('hidden');
    }

    function confirmLogin() {
        window.location.href = '/TicketOrder/user_login'; // 跳转到编辑页面
    }
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 聊天功能
        const chatWindow = document.getElementById('chat-window');
        const chatForm = document.getElementById('chat-form');
        let isSending = false;

        window.toggleChat = function() {
            chatWindow.classList.toggle('hidden');
            if (!chatWindow.classList.contains('hidden')) {
                document.getElementById('chat-messages').scrollTop = document.getElementById('chat-messages').scrollHeight;
            }
        };

        window.sendMessage = async function(form, event) {
            event.preventDefault();

            if (isSending) return false;
            isSending = true;

            const input = document.getElementById('message-input');
            const message = input.value.trim();

            console.log('发送的消息:', message);

            if (!message) {
                alert("请输入有效内容");
                isSending = false;
                return false;
            }

            try {
                addMessage('user', message);
                input.value = '';
                const loader = addMessage('assistant', '<div class="dot-pulse"></div>');

                const contextPath = window.location.pathname.split('/')[1];
                const response = await fetch(`/${contextPath}/ChatServlet`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                    },
                    body: `message=${encodeURIComponent(message)}`
                });

                if (!response.ok) {
                    throw new Error(`HTTP错误! 状态码: ${response.status}`);
                }

                const data = await response.text();
                loader.remove();
                addMessage('assistant', data);
            } catch (error) {
                console.error('请求失败:', error);
                addMessage('assistant', `服务暂时不可用（${error.message}）`);
                alert(`请求失败: ${error.message}`);
            } finally {
                isSending = false;
            }
            return false;
        };

        function addMessage(role, content) {
            console.log("添加消息 - 角色:", role, "内容:", content);
            const container = document.getElementById('chat-messages');
            const div = document.createElement('div');
            div.className = `mb-4 flex ${role === 'user' ? 'justify-end' : 'justify-start'}`;

            const contentDiv = document.createElement('div');
            contentDiv.className = role === 'user'
                ? 'bg-blue-500 text-white rounded-lg p-3 max-w-[80%]'
                : 'bg-gray-100 text-gray-800 rounded-lg p-3 max-w-[80%]';

            contentDiv.innerHTML = content;
            div.appendChild(contentDiv);
            container.appendChild(div);

            container.scrollTo({
                top: container.scrollHeight,
                behavior: 'smooth'
            });

            return div;
        };

        document.getElementById('message-input').addEventListener('keypress', (e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                chatForm.requestSubmit();
            }
        });
    });
</script>
</body>
</html>